<template>
	<view class="mt-2 mx-2 " style="border-radius: 20rpx;">
			<view class="bg-white py-2 flex-1 flex-column rounded" style="background-color: #fff;border-radius: 20rpx;">
				<view class="flex flex-row justify-between px-3">
				
				
				</view>
				
				<view class="flex flex-column flex-1 mx-3" @click="$em.$navigateTo('/pages/circle/detail?id='+item.id)">
					<view class="flex flex-column align-start justify-center flex-1" > 
						<view class="pt-2 flex-1"  v-if="item.content">
							<text class="flex-1" style="color: #868A8D;font-size: 28rpx;">{{item.content}}</text>
						</view> 
						<view class="pt-2">
							<view v-if="item.images.length == 1">
								<image @click.stop="showImages(item.images,0)" style="border-radius: 18px;height: 480rpx;width: 480rpx;" :src="config.imgUrl + item.images[0]"  mode="aspectFill"></image>
							</view>
							
							<view class="flex flex-row" v-if="item.images.length == 2">
								<view @click.stop="showImages(item.images,index)" v-for="(val,index) in item.images" :key="index">
									<image v-if="index == 0"  :src="config.imgUrl + val"  style="height: 322rpx;width: 322rpx;border-top-left-radius: 18px;border-bottom-left-radius: 18px;" mode="aspectFill"></image>
									<image v-if="index == 1"  :src="config.imgUrl + val"  style="height: 322rpx;width: 322rpx;border-top-right-radius: 18px;border-bottom-right-radius: 18px;margin-left: 6rpx;"  mode="aspectFill"></image>
								</view>
							</view>
							
							<view v-if="item.images.length >= 3" class="flex flex-row"> 
								<view class="flex flex-row">
									<image @click.stop="showImages(item.images,0)" :src="config.imgUrl + item.images[0]"  style="height: 446rpx;width: 420rpx;border-top-left-radius: 18px;border-bottom-left-radius: 18px;"   mode="aspectFill"></image>					
									<view>
										<image @click.stop="showImages(item.images,1)" :src="config.imgUrl + item.images[1]"  style="height: 220rpx;width: 220rpx;border-top-right-radius: 18px;margin-left: 6rpx;"  mode="aspectFill"></image>
										<image @click.stop="showImages(item.images,2)" :src="config.imgUrl + item.images[2]"  style="height: 220rpx;width: 220rpx;border-bottom-right-radius: 18px;margin-left: 6rpx;margin-top: 6rpx;" mode="aspectFill"></image>
									</view>
								</view>
							</view>
							<view  v-if="item.images.length > 3" class="rounded px-1 flex flex-row align-center " style="position: absolute;bottom: 15rpx;right: 25rpx;
							background-color: rgba(0,0,0,0.5);padding: 10rpx 10rpx;">
								<em-icon style="font-size: 18rpx;color: #fff;line-height: 18rpx;" :unicode="'\ueb86'"></em-icon>
								<text class="font-22" style="color: #fff;margin-left: 4rpx;line-height: 22rpx;">{{item.images.length}}</text>
							</view>
						</view>
						
						
						<!-- <swiper style="flex-direction: row;height: 300rpx;width: 500rpx;border-radius: 18px;" :indicatorDots="true" :autoplay="true" :circular="true" class="flex-1 mt-2">
							<swiper-item  v-for="(item2, index) in item.videos" :key="index" @click="circleDetails(item)">
							 <view  :style="{'height': `${systemInfo.windowWidth*0.63}px`}">
							   <image style="border-radius: 18px;height: 300rpx;width: 480rpx;" :src="config.imgUrl+item2.thumb" :key="item.thumb" mode="aspectFill"></image>
							 </view>
							 <view class="position-absolute-full align-center justify-center" >
							 	<view style="width: 80rpx;height: 80rpx;border-radius: 80rpx;background-color: rgba(0,0,0,0);" class="align-center justify-center">
							 		<em-icon style=" font-size: 82rpx;line-height: 82rpx;color: #FFFFFF;" :unicode="'\uf282'"></em-icon>
							 	</view>
							 </view>	
							 </swiper-item> 
							<swiper-item class="flex-1" v-for="(img, index) in item.images" :key="index" @click="circleDetails(item)">
							 <view>
							   <image style="border-radius: 18px;height: 300rpx;width: 480rpx;" :src="config.imgUrl+img" :key="img" mode="aspectFill"></image>
							 </view>
							 </swiper-item> 
						 </swiper>	 -->
					</view>
				</view>
			</view>		
		
		
		<view class="bg-white rounded py-3" style="margin-top: 2px;border-radius: 20rpx;">
			<view class="flex-1 mx-3 flex-row justify-between align-end" style="border-radius: 45px;">
				<!-- <view style="" class="ml-1 flex flex-row align-center">
					<view @click="showdetail(item.shop)" v-if="item.shop" class="flex flex-row align-center px-2 py-2" style="background-color: #fff;border-radius: 10rpx;max-width: 300rpx;">
						<image style="width: 40rpx;height: 40rpx;border-radius: 5rpx;" class="mr-1" mode="aspectFill" :src="config.imgUrl + item.shop.pic"></image>
						<text style="font-size: 28rpx;lines:1;text-overflow: ellipsis;color: #242424;font-weight: 700;">商品·</text>
						<text style="font-size: 28rpx;lines:1;text-overflow: ellipsis;width: 130rpx;">{{item.shop.name}}</text>
						<em-icon style="font-size: 18px;font-weight: 600;color: #9E9E9E;" :unicode="'\uea6e'"></em-icon>
					</view>
				</view> -->
				<view style="margin-right: 0px;" @click="$em.$navigateTo('/pages/circle/detail?id='+item.id)">
					<view class="flex flex-row align-center">
						<view class="flex flex-row align-center justify-center pr-2">
							<em-icon style="font-size: 50rpx;color: #AEACB9;" :unicode="'\uecb5'"></em-icon> 
							<text style="color: #AEACB9;font-size: 28rpx;margin-left: 5rpx;">{{item.visits_count}}</text>
						</view>
						<view class="flex flex-row align-center justify-center pr-2" >
							<em-icon style="font-size: 50rpx;color: #AEACB9;" :unicode="'\uef46'"></em-icon> 
							<text style="color: #AEACB9;font-size: 28rpx;margin-left: 5rpx;">{{item.comment_count || 0}}</text>
						</view>
						<view class="flex flex-row align-center justify-center " @click.stop="likeAction()">
							<em-icon v-if="data_item.is_like == 0" style="font-size: 50rpx;color:#FFB4A0" :unicode="'\uee0a'"></em-icon>
							<em-icon class="liked" v-else style="font-size: 50rpx;color:#FF4B1C" :unicode="'\uee0a'"></em-icon> 
							<text style="color: #AEACB9;font-size: 28rpx;margin-left: 5rpx;">{{data_item.like_count | 0}}</text>
						</view>
					</view>
				</view>
				<view style="margin-right: 0px;">
					<view class="flex flex-row align-center">
						<view v-if="userInfo.id == item.uid" class="flex flex-row align-center justify-center pr-2" @click="delAction(item)">
							<em-icon style="font-size: 32rpx;color: #E86262;line-height: 32rpx;" :unicode="'\uec2a'"></em-icon> 
							<text style="color: #E86262;font-size: 26rpx;margin-left: 5rpx;line-height: 26rpx;">删除</text>
						</view>
						<view class="flex flex-row align-center justify-center pr-2" @click="showcomment(item)">
							<em-icon style="font-size: 32rpx;color: #AEACB9;line-height: 32rpx;" :unicode="'\ueca1'"></em-icon> 
							<text style="color: #AEACB9;font-size: 26rpx;margin-left: 5rpx;line-height: 26rpx;">举报</text>
						</view>
					</view>
				</view>
			</view>					
		</view>
	<!-- 	<comment-popup :pid="item.id" ref="comment"></comment-popup> -->
	</view>
</template>

<script>
	// #ifdef APP-NVUE
	//const animation = weex.requireModule('animation');
	// #endif
	//import name from '';
	import {
	  mapState
	} from 'vuex'
	let app = {}
	// #ifdef MP-WEIXIN
	app = getApp({
	  allowDefault: true
	}).$vm
	// #endif
	// #ifndef MP-WEIXIN
	app = getApp({
	  allowDefault: true
	})
	//import commentPopup from './comment.nvue';
	// #endif
	export default {
		name: 'comb-loader',
		components:{
			//commentPopup
		},
		props: {
			// 加载中的文字
			item: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				data_item:this.item
			};
		},
		filters:{
			transformAge(value) {
				if(!value) return;
			    let birthdays = new Date(value.replace(/-/g, "/"))
			    let d = new Date();
			    let age = d.getFullYear() - birthdays.getFullYear() - (d.getMonth() < birthdays.getMonth() || (d.getMonth() == birthdays.getMonth() && d.getDate() <birthdays.getDate()) ? 1 : 0);
			    return age
			},
			
			timestampFormat(timestamp){
				let curTimestamp = parseInt(new Date().getTime() / 1000), //当前时间戳
				timestampDiff = curTimestamp - timestamp, // 参数时间戳与当前时间戳相差秒数
				curDate = new Date( curTimestamp * 1000 ), // 当前时间日期对象
				tmDate = new Date( timestamp * 1000 ),  // 参数时间戳转换成的日期对象
				Y = tmDate.getFullYear(), 
				m = tmDate.getMonth() + 1, d = tmDate.getDate(),
				H = tmDate.getHours(), i = tmDate.getMinutes(), 
				s = tmDate.getSeconds();
				if ( timestampDiff < 60 ) { // 一分钟以内
					return "刚刚";
				} else if( timestampDiff < 3600 ) { // 一小时前之内
					return Math.floor( timestampDiff / 60 ) + "分钟前";
				} else if ( curDate.getFullYear() == Y && curDate.getMonth()+1 == m && curDate.getDate() == d ) {
					return '今天 ' + ((String(H).length == 1 ? '' : '') + H) + ':' + ((String(i).length == 1 ? '0' : '') + i);
				} else {
					var newDate = new Date( (curTimestamp - 86400) * 1000 ); // 参数中的时间戳加一天转换成的日期对象
					if ( newDate.getFullYear() == Y && newDate.getMonth()+1 == m && newDate.getDate() == d ) {
						return '昨天 ' + ((String(H).length == 1 ? '' : '') + H) + ':' + ((String(i).length == 1 ? '0' : '') + i);
					} else if ( curDate.getFullYear() == Y ) {
						return  ((String(m).length == 1 ? '' : '') + m) + '月' + ((String(d).length == 1 ? '0' : '') + d) + '日 '  ;
					} else {
						return  Y + '年' + ((String(m).length == 1 ? '' : '') + m) + '月' + ((String(d).length == 1 ? '0' : '') + d) + '日 ' + ((String(H).length == 1 ? '' : '') + H) + ':' + ((String(i).length == 1 ? '0' : '') + i);
					}
				}
			},
			transformTimestamp(value = Date.now()/1000, format = "Y-M-D") {
				if(!value) return;
				 const formatNumber = n => `0${n}`.slice(-2);
				    const date = new Date(value*1000);
				    const formatList = ["Y", "M", "D", "h", "m", "s"];
				    const resultList = [];
				    resultList.push(date.getFullYear().toString());
				    resultList.push(formatNumber(date.getMonth() + 1));
				    resultList.push(formatNumber(date.getDate()));
				    resultList.push(formatNumber(date.getHours()));
				    resultList.push(formatNumber(date.getMinutes()));
				    resultList.push(formatNumber(date.getSeconds()));
				    for (let i = 0; i < resultList.length; i++) {
				        format = format.replace(formatList[i], resultList[i]);
				    }
				    return format;
			},
		},
		computed: {
			...mapState([
			    'systemInfo',
				'config',
				'userInfo'
			]),
			confirmBtns() {
			  return {
			    iconUnicode: '\ueb7a',
			    styles: {
			      btn: app.$getThemeStyle(['bg-color-101']),
			      icon: app.$getThemeStyle(['color-102'])
			    }
			  }
			}
		},
		created() {
			this.$em = app.$em
		},
		destroyed() {
		
		},
		methods: {
			showdetail(item){
				app.$navigateTo(`/pages/goods/goods?id=${item.id}`)
			},
			delAction(item){
				this.$emit("delAction",item)
			},
			circleDetails(item){
				console.log("hahah")
				if(uni.checkUserProfile()){
					app.$navigateTo(`/pages/user/circle-details?id=${item.id}`)
				}
				
			},
			showImages(images,index){
				   uni.previewImage({
				        urls:  images.map(image => this.getImageUrl(image)), // 图片列表的url数组
				        current: index, // 当前图片的索引
				        loop: true, // 是否开启循环预览
				        longPressActions: { // 可选的长按菜单操作
				          itemList: ['发送给朋友', '保存图片'],
				          success: res => {
				            console.log(res.tapIndex)
				          }
				        }
				      })
			},
			getImageUrl (url) {
			      return this.config.imgUrl + url // 拼接URL前缀
			},
			showcomment(){
				this.$refs.comment.show()
			},
			likeAction(){
				if(this.item.is_like == 0){
					this.setlike()
				}else{
					this.setunlike()
				}
			},
			async setlike(){
				this.data_item.is_like = 1;
				this.data_item.like_count ++
				const res = await uni.$http.get("/api/Like/setlike",{
					pid:this.item.id,
					type:0,
				})
				.then(res=>{
					
				})
				.catch(err=>{
					this.data_item.is_like = 0;
					this.data_item.like_count --;
					console.log("err",err)
				})
					
			},
			async setunlike(){
				this.data_item.is_like = 0;
				this.data_item.like_count --
				const res = await uni.$http.get("/api/Like/setunlike",{
					pid:this.item.id,
					type:0,
				})
				.then(res=>{
					
				})
				.catch(err=>{
					this.data_item.is_like = 1;
					this.data_item.like_count ++
					console.log("err",err)
				})	
			},
			createroom1v1Call(user){
				uni.showLoading({
					title:"请稍后..."
				})
				uni.$http.get("/api/Chat/createroom1v1",{
					fid:user.id,
				})
				.then(res=>{
					console.log("res",res)
					uni.$http.post("/api/call/create1v1",{
						room_id:res.data.id,
						users:[user.id]
					}).then(ret =>{
						uni.hideLoading()
						uni.entryVideoRoom({id:ret.data})
					}).catch(err=>{
						uni.hideLoading()
					})
				})
				.catch(err=>{
					console.log("err",err)
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style>

  .list {
    padding-top: 0px;
  }

  .list-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .list-item-info {
    flex-direction: row;
    justify-content: space-between;
  }

  .list-item-info-id {
    font-size: 15px;
    font-weight: 700;
  }

  .list-item-info-time {
    font-size: 12px;
  }


  .list-item-operate {
    
    flex-direction: row;
  }

  .list-item-operate-btn {
    flex: 1;
    justify-content: center;
    align-items: center;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
	margin-top: 20px;
  }


 .list-item-operate-btn-center {
	 
  }
  .list-item-operate-btn-left {
    margin-right: 10px;
  }

  .list-item-operate-btn-right {
    margin-left: 10px;
  }

  .list-item-operate-btn-text {
    font-size: 14px;
    font-weight: 700;
	
  }
  
  .list-item-info-default {
    background-color: #FF0000;
    height: 22px;
    padding: 0 8px;
    justify-content: center;
    border-radius: 4px;
  }
  .list-item-info-default-text {
    line-height: 10px;
    font-size: 10px;
    color: #FFFFFF;
  	text-align: center;
  }
  
  .header {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
  }
  
  .scroller {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .banner {
    /* position: sticky; */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  
  .banner-image-wrap {
    flex-direction: row;
  }
  
  .banner-image {
    flex: 1;
  }
  
  .banner-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.28);
  }
  
  .banner-word {
    position: absolute;
    justify-content: center;
    transform: translate(-50%, -50%);
  }
  
  .banner-word-title {
    text-align: center;
    font-size: 29px;
    font-weight: 700;
    color: #FFFFFF;
  }
  
  .banner-word-info {
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
  	margin-top: 15px;
  }
  
  .content-wrap {
    margin-top: -28px;
  }
  
  .content {
    border-radius: 28px;
  }
  

  .list {
    padding: 0 18px;
  }
  .list-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  

  

  
  .list-item-info {
    margin-left: 18px;
  }
  
  .list-item-title {
    line-height: 19px;
    font-size: 15px;
    font-weight: 700;
  }
  
  .list-item-price {
    margin-top: 5px;
    font-size: 12px;
  }
  
  .list-item-btn {
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    border-radius: 9px;
  }
  

  .border-bottom{
  	  border-color: #EBEBEB;
  	  border-bottom: 2px;
  }
  
  
  @keyframes zoom {
    0% {
      transform: scale(0.5);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }
  .liked {
    animation: zoom 0.5s ease-in-out;
  }
</style>